<template>
  <scroller height="84vh">
      <div class="mat-content-pane">
        <div v-if="isMdFile" class="mat-content-inner" :class="formatClass">
          <paragraph
            v-for="(p, i) in paras"
            :key="i"
            :html="p"
            @select="select"
            :highlight="highlight"
          ></paragraph>
        </div>
        <!-- TODO: 这一段要移植到PoemDetails里去-->
        <div v-else-if="mat.format == MatFormat.Poem" class="mat-content-inner" :class="formatClass">
          <table>
            <tr v-for="(ln, i) in lines" :key="i">
              <td class="line-stat">
                <nistat v-if="ln.stars > 0" i="star" :value="ln.stars"></nistat>
                <nistat v-if="ln.heat > 0" i="heat" :value="ln.heat"></nistat>
              </td>
              <td class="line-wrapper">
                <line-content :content="ln.content" :linenum="i+1" @select="select">{{ln}}</line-content>
              </td>
              <td></td>
            </tr>
          </table>
        </div>
        <div v-else class="mat-content-inner" :class="formatClass">
          {{content}}
        </div>
      </div>
  </scroller>
</template>

<script>
import Paragraph from "./Paragraph.vue";
import Nistat from "@tools/NeoStatIcon.vue";
import LineContent from "./LineContent.vue";
import Markdown from "@/js/markdown/markdown.js";
import { MatFormat } from "../../js/constants";

// 给markdown文本添加行号，注意要避各种markdown的符号，以免破坏结构。比如```
function addLineNum(text) {
  let lines = text.split("\n");
  let isCode = false;
  for (let i = 0; i < lines.length; ++i) {
    let trimmed = lines[i].trim();
    if (trimmed == "") continue;
    // 暂时忽略代码段，未来考虑为代码段加上行号，但是需要修改markdown解析以识别这种行号
    if (trimmed.startsWith("```")) {
      isCode = !isCode;
      continue;
    }
    if (isCode) continue;
    lines[i] = lines[i] + "[#" + String(i + 1) + "]";
  }
  return lines.join("\n");
}
export default {
  props: ["content", "noScroll", "mat"],
  components: {
    Paragraph,
    LineContent,
    Nistat
  },
  computed: {
    formatClass() {
      if (this.isMdFile) {
        return "markdown-content";
      } else {
        return "text-content";
      }
    },
    isMdFile() {
      return this.mat.format == MatFormat.Markdown || (this.mat.format == MatFormat.File && this.mat.link.endsWith('.md'));
    }
  },
  data() {
    return {
      MatFormat: MatFormat,
      paras: [],
      highlight: "",
      lines: [],
    };
  },
  watch: {
    content() {
      console.log("content updated!");
      this.parseContent();
    },
  },
  created() {
    if (this.content !== "") {
      this.parseContent();
    }
  },
  methods: {
    // TODO: how to avoid contaminating <pre><code> blocks
    parseContent() {
      if (!this.content) return;
      if (this.isMdFile) {
        this.parseMarkdown();
      } else {
        this.parseLines();
      }
    },
    parseLines() {
      let res = [];
      for (let ln of this.content.split('\n')) {
        res.push({
          content: ln,
          heat: 0,
          stars: 0
        });
      }
      this.lines = res;
    },
    parseMarkdown() {
      // 给每行内容添加行号：
      let content = addLineNum(this.content);
      let md = Markdown.render(content);

      let dp = new DOMParser();
      let dom = dp.parseFromString(md, "text/html");

      let tags = dom.body.children;
      let paras = [];
      for (let i = 0; i < tags.length; ++i) {
        paras.push(tags[i].outerHTML);
      }

      let mdps = paras.map((ln) => ln.trim());
      this.paras = mdps;
    },
    select(data) {
      this.$emit("select", data);
    },
    getHeat(n) {
      return n+100;
    },
    hasHeat(n) {
      return this.getHeat(n) > 0;
    },
  },
};
</script>

<style lang="stylus">
.mat-content-inner
  padding 0 1vh 0 0
  .line
    display inline
    padding 2px 0
    line-height 2em

    &.mark
      border-bottom 1px dashed #A0CFFF

    &.selected
      background-color #C6E2FF
      border-radius 5px

    & span.selected
      background-color #C6E2FF

    .pinyin
      border-bottom 1px dashed #aaa

    .note
      // background-color #C6E2FF
      border-bottom 4px inset #C6E2FF

      &.deep
        // background-color #A6C2CF
        border-bottom 5px inset #A6C2CF

    ruby
      &>rt
        color #888

    .tooltip
      font-size 0.6em
      color #888
      border-radius 4px
      background-color #eee
      padding 2px 6px

      .tooltip-arrow, .tooltip-arrow::before
        position absolute
        width 6px
        height 6px
        z-index -1

      .tooltip-arrow::before
        content ''
        transform rotate(45deg)
        background-color #eee

    .tooltip[data-popper-placement^='top'] > .tooltip-arrow
      bottom -4px

    .tooltip[data-popper-placement^='bottom'] > .tooltip-arrow
      top -4px

    .tooltip[data-popper-placement^='left'] > .tooltip-arrow
      right -4px

    .tooltip[data-popper-placement^='right'] > .tooltip-arrow
      left -4px

  & .line-stat
    font-size 0.8em
    color #409EFF
    padding 5px

  table
    margin 2vh 2vw
    td
      display table-cell
      text-align left
      vertical-align middle

      .line-stat
        font-size 0.8em

      .line
        font-size 1.4em
</style>
